<template>
  <!--Blog留言-->
  <div class="warp">
    <div class="main_l">
      <div class="news_works">
        <!-- 返回首页 -->
        <backIndex title="Blog留言"/>
        <div class="blog">
          <div class="form">
          <p><label for="username">姓名</label> <input id="username" type="text" v-model="form.username" placeholder="请输入您的姓名"></p>
          <p><label for="tel">电话</label> <input id="tel" type="text" v-model="form.phone" placeholder="请输入您的电话（选填）"></p>
          <p><label for="email">邮箱</label> <input id="email" type="email" v-model="form.email" placeholder="请输入您的邮箱（选填）"></p>
          <textarea placeholder="留言内容" v-model="form.content"></textarea>
            <input type="submit" class="submit" @click="submit()"/>
          </div>
        </div>
      </div>
    </div>
    <!-- 主要右边 -->
    <mainR />
  </div>
</template>

<script>
import backIndex from "@/components/backIndex";
import mainR from "@/components/mainR";
import {create} from '@/api/message.js'
export default {
  components: { mainR , backIndex },
  data() {
    return {
      form:{
        username:'',
        phone:'',
        email:'',
        content:'',
      }
    };
  },
  mounted() {},
  computed: {},
  methods: {
    submit(){
      console.log('form',this.form)
      if(!this.form.username){
        return alert('姓名不能为空')
      }
      let data=Object.assign(this.form)
      const that=this
      create(data).then(function(res){
        console.log(res)
        if(res.success){
          alert('提交成功')
        }else{
          alert(res.message)
        }
      })
    }
  },
};
</script>
<style scoped>
</style>
